<template>
  <div class="app-container">

    <el-form :model="currentSetting" ref="currentSetting" label-width="500px" class="demo-ruleForm">
  <el-form-item
    v-for="data in currentSetting.dataList"
    :label="data.rateType"
    :key="data.id"
    prop="age"
    :rules="[
      { required: false, message: '费率不能为空'},
      { type: 'number', message: '时间必须为数字值'}
    ]"
  >:&nbsp;&nbsp;&nbsp;&nbsp;
    <el-input style="width:100px" type="age" v-model="data.rate" autocomplete="off"/>
    <b style="font-size:15px">&nbsp;&nbsp;&nbsp;%,&nbsp;&nbsp;</b>({{data.rule}})
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="submitForm(currentSetting)">提交</el-button>
    <el-button @click="resetForm()">重置</el-button>
  </el-form-item>
</el-form>
    </div>
</template>
<script>
//引入调用slideShow.js文件
import mySetting from "@/api/setting";

export default {
  //写核心代码位置
  // data:{
  // },
  data() {
    //定义变量和初始值
    return {
      listLoading: true, // 是否显示loading信息
      list: null, //查询之后接口返回集合
      total: 0, //总记录数
      rateObject: {
        id: 0,
        rateType: "",
        rule: "",
        rate: 0.0000,  
      },
      rateList:[],
      currentSetting:{
        dataList: []
      }, 
      //条件封装对象
      checkList: [],
    };
  },
  created() {
    //页面渲染之前执行，一般调用methods定义的方法
    //调用
    this.getCurrentSetting();
  },
  mounted() {
    this.listLoading = false;
  },
  methods: {
    //创建具体的方法，调用slideShow.js定义的方法
    //获取轮播图列表的方法,默认是第一页
    getCurrentSetting() {
      mySetting
        .getCurrentSettingShow()
        .then((response) => {
          //请求成功
          //response接口返回的数据
          for(let i=0; i < response.data.length; i++) {
              response.data[i].rate = response.data[i].rate * 100
          }
          this.currentSetting.dataList = response.data;
        });
    },
    submitForm(formName) {
      alert(1);
      for(let i=0; i < formName.dataList.length; i++) {
        this.rateObject.id = formName.dataList[i].id
        this.rateObject.rateType = formName.dataList[i].rateType
        this.rateObject.rule = formName.dataList[i].rule
        this.rateObject.rate = formName.dataList[i].rate / 100
        this.rateList.push(this.rateObject);
      }
      // console.log(this.rateList);
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
        mySetting
        .submitSettingShow(this.rateList)
        .then((response) => {
            this.$message({
            type: "success",
            message: "修改成功!",
          });
            console.log(this.rateList)
          });
        // } else {
        //   console.log('error submit!!');
        //   return false;
        // }
      // });
    },
    resetForm() {
      getCurrentSetting();
    }

  },
};
</script>
<style>
#content {
  width: 80%;
  margin: 0 auto;
}
.el-row .el-col-24 {
  width: 150px;
}
.el-col-24:nth-child(3),
.el-col-24:nth-child(4) {
  float: right;
}
</style>